<template>
  <div class="login">
    <bg-particles />
    <h1 class="title">登录</h1>
    <div class="login-box">
      <div class="left">
        <qrcode-vue :value="'url'" :size="100" level="H" />
      </div>
      <div class="right">
        <vp-dynamic-form
          :formSchema="formSchema"
          :fields="fields"
          ref="formRef"
        ></vp-dynamic-form>
        <div class="info">
          <a-checkbox v-model:checked="checked">记住密码</a-checkbox>
          <a @click="$router.push({ name: 'Register' })">注册</a>
        </div>
        <a-button block type="primary" @click="submit">登录</a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onBeforeMount, reactive } from "vue";
import { bgParticles } from "@c/bg-particles";
import QrcodeVue from "qrcode.vue";
import { useUserStore } from "@/store/modules/user";
import { useRouter } from "vue-router";
import md5 from "md5";
import {
  setCookie,
  getCookie,
  removeCookie,
  enCrypto,
  deCrypto,
} from "../utils/tools";
const userStore = useUserStore();
const router = useRouter();
const formRef = ref<any>(null);
const fields = reactive({
  username: "",
  password: "",
});
const formSchema = ref<any>({
  formItem: [
    {
      type: "Input",
      label: "",
      field: "username",
      value: "",
      props: {
        placeholder: "请输入用户名",
        bordered: false,
      },
      rules: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    {
      type: "InputPassWord",
      label: "",
      field: "password",
      value: "",
      props: {
        placeholder: "请输入密码",
        bordered: false,
      },
      rules: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
      ],
    },
  ],
});
const checked = ref(false);
const remember = (val: any) => {
  if (checked.value) {
    let account = enCrypto(JSON.stringify(val));
    setCookie("account", account);
  } else {
    removeCookie("account");
  }
};
const submit = () => {
  formRef.value.validated().then(async (val) => {
    const { username, password } = val;
    await userStore.handleLogin({
      username,
      password: md5(password),
    });
    remember(val);
    router.push({
      name: "Home",
    });
  });
};
const init = () => {
  let account = getCookie("account");
  try {
    account = JSON.parse(deCrypto(account));
    if (account.username) {
      fields.username = account.username;
      fields.password = account.password;
      checked.value = true;
    }
  } catch (error) {
    removeCookie("account");
  }
};
onBeforeMount(() => {
  init();
});
</script>

<style lang="less">
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  .title {
    z-index: 1;
    color: #333;
  }
  .bg-particles {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../assets/images/jg.jpg");
    background-size: cover;
    opacity: 0.8;
    z-index: 0;
  }
  .login-box {
    background-color: #fff;
    box-shadow: 0 0 4px #fff;
    display: flex;
    z-index: 1;
    opacity: 0.9;
    border-radius: 4px;
    .ant-form-item-control-input {
      border-bottom: 1px solid #ddd;
    }
    .ant-input-affix-wrapper,
    .ant-input {
      padding-left: 0;
    }
    .left {
      padding: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .right {
      padding: 16px;
      border-left: 1px solid #ddd;
      max-width: 400px;
    }
    .info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      margin-top: -8px;
    }
  }
}
</style>
